<template>
  <div class="app-container">
    <div class="container">
      <div class="main page page-list">
        <div class="head-container">
          <el-card shadow="never">
            <div class="search-bar">
              <el-form
                :inline="true"
                :model="searchModel"
                size="mini"
                class="demo-form-inline"
              >
                <el-form-item label="商户编号">
                  <el-input
                    v-model="searchModel.userId"
                    placeholder="商户编号"
                  />
                </el-form-item>
                <el-form-item label="充值编号">
                  <el-input
                    v-model="searchModel.id"
                    placeholder="充值编号"
                  />
                </el-form-item>
                <el-form-item label="充值状态">
                  <el-radio-group
                    v-model="searchModel.payStatus"
                    @change="search"
                  >
                    <el-radio-button label="">不限</el-radio-button>
                    <el-radio-button label="wait_pay">待付款</el-radio-button>
                    <el-radio-button label="payed">已付款</el-radio-button>
                    <el-radio-button label="cancelled">已取消</el-radio-button>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="充值方式">
                  <el-radio-group
                    v-model="searchModel.billPayMethod"
                    @change="search"
                  >
                    <el-radio-button label="">不限</el-radio-button>
                    <el-radio-button label="alipay_web_page">电脑端充值</el-radio-button>
                    <el-radio-button label="alipay_app_qrcode">扫码充值</el-radio-button>
                    <el-radio-button label="all_pay_channel">转账充值</el-radio-button>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="充值时间">
                  <el-date-picker
                    v-model="searchModel.endTime"
                    :default-time="['00:00:00']"
                    type="datetimerange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd HH:mm:ss"
                  />
                </el-form-item>
                <el-form-item label="金额">
                  <el-col :span="11">
                    <el-input
                      v-model="searchModel.minAmount"
                      placeholder="最小金额/元"
                      style="width: 100%;" />
                  </el-col>
                  <el-col :span="2" class="line">~</el-col>
                  <el-col :span="11">
                    <el-input
                      v-model="searchModel.maxAmount"
                      placeholder="最大金额/元" />
                  </el-col>
                </el-form-item>

                <el-form-item class="operations">
                  <el-button type="success" 
                  @click="exportSafePayTransStat">
                  导出</el-button>
                  <el-button
                    type="primary"
                    @click="search"
                  >查询</el-button>
                  <el-button
                    type="default"
                    @click="reset"
                  >重置</el-button>
                </el-form-item>
              </el-form>
            </div>

          </el-card>
        </div>

        <div class="sumBox">
          <div class="sumItem">
          <span class="m-t-8">服务费成功充值总额</span>
          <div class="sumdata1">
            <span>¥ {{ extra ? extra : "0" }}</span>
          </div>
        </div>
        </div>

        <div class="data-list-wrap">
          <el-card shadow="never">
            <el-table
              v-loading="loading"
              :data="list"
              size="small"
              style="width: 100%;"
            >
            <el-table-column
                prop="endTime"
                label="充值时间"
              />
              
              <el-table-column
                prop="id"
                label="充值编号"
              />
              <el-table-column
                prop="userId"
                label="商户编号"
              />
              <el-table-column label="充值金额">
                <template slot-scope="scope">
                  ¥ {{ scope.row.amount / 100 }}
                </template>
              </el-table-column>
              <el-table-column label="充值状态">
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.payStatus === 'payed'"
                    style="color: #44B549"
                  >已付款</span>
                  <span
                    v-if="scope.row.payStatus === 'wait_pay'"
                    style="color: red"
                  >待付款</span>
                  <span
                    v-if="scope.row.payStatus === 'cancelled'"
                    style="color: red"
                  >已取消</span>
                </template>
              </el-table-column>

              <el-table-column label="充值方式">
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.billPayMethod === 'by_admin'"
                  >运营充值</span>
                  <span
                    v-if="scope.row.billPayMethod === 'all_account'"
                  >-</span>
                  <span
                    v-if="scope.row.billPayMethod === 'account_and_pay_channel'"
                  >-</span>
                  <span
                    v-if="scope.row.billPayMethod === 'pay_trans_channel'"
                  >-</span>
                  <span
                    v-if="scope.row.billPayMethod === 'alipay_app_qrcode'"
                  >扫码充值</span>
                  <span
                    v-if="scope.row.billPayMethod === 'alipay_web_page'"
                  >电脑端充值</span>
                  <span
                    v-if="scope.row.billPayMethod === 'all_pay_channel'"
                  >转账充值</span>
                </template>
              </el-table-column>

              <el-table-column
                prop="alipayNickName"
                label="付款支付宝账号"
              />

   
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <div v-if="scope.row.billPayMethod === 'by_admin'">
                   <el-popover
                placement="top"
                v-if="judgingCondition(scope.row.payStatus,scope.row.endTime)"
                :ref="'nosign' + scope.$index"
                width="160"
              >
                <p>是否要作废该条充值记录?</p>
                <div style="text-align: right; margin: 0">
                  <el-button
                    size="mini"
                    type="text"
                    @click="$refs['nosign' + scope.$index].doClose()"
                    >取消</el-button
                  >
                  <el-button
                 
                    :loading="opLoading"
                    type="primary"
                    size="mini"
                    @click="
                      cancelChargeRecord(
                        'nosign' + scope.$index,
                        scope.row.id,scope.row.userId
                      )
                    "
                    >确定</el-button
                  >
                </div>

                <!-- <el-button  v-permission="['ADMIN', 'charge-record::cancel-charge-record']" slot="reference" type="text" class="m-l-16"
                  >作废</el-button
                > -->
              </el-popover>
                  </div>
                </template>
              </el-table-column>
            </el-table>


            <div class="paging-wrap">
              <el-pagination
                :current-page="searchModel.pageNo"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="searchModel.pagesize"
                :total="searchModel.count"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </el-card>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import { searchChargeRecord,cancelChargeRecord } from '@/api/business'
import moment from "moment";
const defaultModel = {
  id: null,
  payStatus: '',
  billPayMethod:'',
  userId: null,
  endTime: null,
  minAmount: '',
  maxAmount: '',
  pageNo: 1,
  pageSize: 10,
  count: 0
}
export default {
  components: {},
  data() {
    return {
      searchModel: _.cloneDeep(defaultModel),
      list: [],
      loading: false,
      curData: null,
      opLoading:false,
      extra:"",
    }
  },
  mounted() {
    // 判断路由中是否有daily参数，如果有代表从日账单跳转过来
    const param = this.$route.query.from
    if (param === 'daily') {
      this.searchModel.maxAmount = 0
      this.searchModel.minAmount = ''
    }
    this.init()
  },
  methods: {
     // 导出
     exportSafePayTransStat() {
      var $temp = $("<form type='hidden'>"); //创建form标签
      $temp.attr("target", "_black");
      $temp.attr("method", "get");
      $temp.attr("action", "/api/admin/charge-record/export");
      var $input = $('<input type="hidden">');
      $input.attr("name", "searchModelJson");

      let searchModel = _.cloneDeep(this.searchModel);
      this.compileSearchModel(searchModel);

      $input.attr("value", JSON.stringify(searchModel));
      $temp.append($input);
      $(document.body).append($temp);
      $temp.submit();
    },
    search() {
      this.getList(1)
    },

    getList(pageNo) {
   
      var self = this
      this.loading = true
      if (pageNo != undefined) {
        this.searchModel.pageNo = pageNo
      }

      const searchModel = _.cloneDeep(this.searchModel)
      if (searchModel.minAmount != '' && searchModel.minAmount != 0) {
        searchModel.minAmount = (searchModel.minAmount * 100).toFixed()
      }
      if (searchModel.maxAmount != '' && searchModel.maxAmount != 0) {
        searchModel.maxAmount = (searchModel.maxAmount * 100).toFixed()
      }
      searchChargeRecord(this.compileSearchModel(searchModel))
        .then((data) => {
          self.searchModel.pageNo = ++data.pageNo
          self.searchModel.count = data.count
          self.searchModel.pageSize = data.pageSize
          self.list = data.data
          self.extra  = data.extra
          self.loading = false
        })
        .catch((err) => {
          console.log(err.response.data.message)
        })
    },
       //作废充值记录
    cancelChargeRecord(index, id,userId) {
      this.opLoading = true;
        let form ={
            id,
            userId
        };     
        cancelChargeRecord(form)
        .then((resp) => {
          if (resp.success) {
            this.$message.success("作废充值记录成功");
            this. getList(1);
          } 
          this.$refs[index].doClose();
          this.opLoading = false;
        })
        .catch((err) => {});
    },
    //作废判断条件
    judgingCondition(payStatus,endTime){
        return payStatus === 'payed' &&  moment().subtract(2,'day').isBefore(moment(endTime))
    },
    reset() {
      this.searchModel = _.cloneDeep(defaultModel)
      this.getList(1)
    },
    compileSearchModel(searchModel) {
      searchModel.pageNo = searchModel.pageNo - 1

      if (searchModel.endTime && searchModel.endTime.length) {
        searchModel['endMinTime'] = searchModel.endTime[0]
        searchModel['endMaxTime'] = searchModel.endTime[1]
      }
      delete searchModel.endTime

      return searchModel
    },
    // 修改分页
    handleSizeChange(val) {
      this.searchModel.pageSize = val
      this.getList(1)
    },
    // 修改页面
    handleCurrentChange(val) {
      this.getList(val)
    },
    init() {
      this.getList(1)
    }
  }
}
</script>

<style lang="scss" scoped>
.sumBox {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  padding: 0 2px;
  margin-bottom: 10px;
}
.sumItem {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    align-items: center;
    margin-right: 16px;
    height: 150px;
    padding: 16px;
    background-color: #fff;
    box-sizing: border-box;
    font-weight: 600;

    .sumdata {
      width: 100%;
      height: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 600;
    }

  }
.substationGroup {
  margin-bottom: 16px;
  .substationItem {
    margin-right: 20px;
  }
}
</style>
0